<template>
<div class="top" v-show="show" @click="topClick">
  <span class="bg"></span>
</div>
</template>

<script>
export default {
  name: 'BackTop',
  data () {
    return {
      show: false
    }
  },
  created () {
    const winHeight = document.documentElement.clientHeight
    window.addEventListener('scroll', () => {
      const scrollHeight = document.documentElement.scrollTop
      if (scrollHeight > winHeight) {
        this.show = true
      } else {
        this.show = false
      }
    })
  },
  methods: {
    topClick () {
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style lang="less" scoped>
.top{
  position: fixed;
  bottom: 250px;
  width: 1200px;
  height: 39px;
  z-index: 0;
  opacity: .8;
  .bg{
    display: inline-block;
    background: url("../../assets/images/返回顶部.png") no-repeat 0 0;
    background-size: 39px 39px;
    height: 39px;
    width: 39px;
    position: relative;
    left: 1130px;
  }
}
</style>
